<!--文章列表-->
<template>
  <div class="theArticleLists">
    <div class="theArticleLists-button" v-show="$store.state.redBase.cmpName !== '' " @click="theEntireProvinceBase"><img src="@/assets/static/image/redBase/back@2x.png" alt="全省基地">全省{{ type }}</div>
    <div class="theArticleLists-header">{{ this.$store.state.redBase.cmpName === '' ? "全省所有" + type: $store.state.redBase.cmpName + type }}</div>
    <div class="theArticleLists-content">
      <div v-for="item in $store.state.redBase.theArticleListsTheData " :key="item.id" class="theArticleLists-main">
        <span class="theCompanyName">{{ item.cmpName }}</span>
        <span class="theTitle" @click="details(item.id)" v-if="$store.state.redBase.routerId === 'communicationLine'">{{ item.redCultureBaseName }}</span>
        <span class="theTitle" @click="details(item.id)" v-else>{{ item.educationBaseName }}</span>
      </div>
    </div>
    <div class="theArticleLists-footer">-数据到底了-</div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      cmpName:this.$store.state.redBase.cmpName,//公司名称
    }
  },
  computed:{
    type(){
      return this.$store.state.redBase.routerId === 'communicationLine' ? '路线' : '基地';
    }
  },
  methods:{
    /**
     * 全省基地
     */
    theEntireProvinceBase(){
      //重置公司
      this.$store.commit('redBase/setCmpName','');
      //重置地图
      this.$store.commit('redBase/setReset');
      //重置列表
      this.$store.dispatch('redBase/getRedRouteList',this.$store.state.redBase.routerId);
    },
    /**
     * 跳转详情页面
     */
    details(id){
      this.$router.push({name:'TheDetailedContent',params:{ id }})
    }
  }
}
</script>
<style scoped lang="less">
@import "@/assets/css/redBase/redBase";
</style>
